<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-button size="mini" @click="add">添加</el-button>
			<el-table size="small" :data="roleList" border style="width: 100%">
				<el-table-column prop="rolename" label="角色名称" width="180">
				</el-table-column>
				<el-table-column prop="description" label="所在部门">
				</el-table-column>
				<el-table-column width="250px" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateRole(scope.row)">编辑</el-button>
						<el-button size="mini" @click="upRole(scope.row)" type="warning" plain>角色菜单</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-drawer title="角色菜单维护" 
			:visible.sync="drawer" 
			>
			<el-button size="mini" @click="updatemenusubmit()">添加</el-button>
				<span><el-tree :data="treeData" 
				:check-strictly="true"
				show-checkbox 
				default-expand-all 
				node-key="id" 
				ref="tree" 
				@check="trcange"
						>
					</el-tree></span>
			</el-drawer>

			<el-dialog title="添加" :visible.sync="dialogFormVisible">
				<el-form :model="formadd">
					<el-form-item label="角色名称" label-width="80px">
						<el-input v-model="formadd.rolename" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="部门名称" label-width="80px">
						<el-input v-model="formadd.description" autocomplete="off"></el-input>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改" :visible.sync="updateFormVisible">
				<el-form :model="formadd">
					<el-form-item label="角色名称" label-width="80px">
						<el-input v-model="formadd.rolename" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="部门名称" label-width="80px">
						<el-input v-model="formadd.description" autocomplete="off"></el-input>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="updateFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="updatesubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				drawer: false, //控制角色菜单维护抽屉显示
				updateFormVisible: false,
				roleList: [],
				treeData: [],
				nowroleid:0,
				formadd: {
					id: "",
					rolename: "",
					description: ""
				},
				dialogFormVisible: false
			},
			methods: {
				trcange(a,b){
					console.log(a.parentid);
					let treeNowArr=this.$refs.tree.getCheckedKeys();//获取当前选中的所有节点
					treeNowArr.push(a.parentid)
					if(a.children!=null){
						const chidrenArr=a.children.map((obj)=>obj.id);//获取当前节点的id子集合
						treeNowArr=treeNowArr.filter(item=>!chidrenArr.includes(item));
					}
					this.$refs.tree.setCheckedKeys(treeNowArr);
				},
				add() {
					this.dialogFormVisible = true
				},
				updateRole(row) {
					this.updateFormVisible = true;
					this.formadd = {
						id: row.id,
						rolename: row.rolename,
						description: row.description
					}
				},updatemenusubmit(){
					let treeNowArr=this.$refs.tree.getCheckedKeys();//获取当前选中的所有节点
					axios.post(API+"s/updateRoleMenuid",{
						roleid:this.nowroleid,
						listMenu:treeNowArr
					}).then(res => {
						console.log(res.data);
						this.$message("修改成功")
						// const arr=slist.map((obj)=>obj.menuid);
						// this.$refs.tree.setCheckedKeys(arr);
					
					})
				},
				updatesubmit() {
					axios.post(API + "s/updaterole", this.formadd).then(res => {
						if (res.data) {
							this.$message("修改成功")

							this.initData();
						} else {
							this.$message("修改失败")
						}
						this.updateFormVisible = false;
					})
				},
				upRole(row) {
					this.nowroleid=row.id;
					this.initTreeData();
					//根据角色id获取菜单集合
					axios.get(API + "s/selectrmId/"+row.id).then(res => {
						let slist=res.data.data.rolemenuList;
						const arr=slist.map((obj)=>obj.menuid);
						this.$refs.tree.setCheckedKeys(arr);
					
					})
					
					this.drawer = true
				},
				initTreeData() {
					axios.get(API + "s/selevtMenu").then(res => {
						let arr = arrayToTree(res.data.data.menuList);
						this.treeData = arr;
						
					})
				},
				initData() {
					axios.get(API + "s/selectAllRole").then(res => {
						console.log(res.data.data.menuList);
						this.roleList = res.data.data.roleList;
					})
				},
				addsubmit() {
					axios.post(API + "s/insertrole", this.formadd).then(res => {
						if (res.data) {
							this.$message("新增成功")

							this.initData();
						} else {
							this.$message("新增失败")
						}
						this.dialogFormVisible = false
					})
				},
				handleDelete(index, row) {
					this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post(API + "s/deleterole", row).then(res => {
							if (res.data) {
								this.$message.success("删除成功")
								this.initData();
							} else {
								this.$message("删除失败")
							}
						})
					})
				}
			},
			mounted() {
				this.initData();
			}
		})
	</script>
</html>